<!-- /components/scroll-page.vue -->
<script setup>
  import { computed } from 'vue'

  // 读取页面视口的高度
  const { windowHeight } = uni.getSystemInfoSync()

  // 自定义组件属性
  const scrollPageProps = defineProps({
    scrollTop: {
      type: Number,
      default: 0,
    },
    borderStyle: {
      type: [String, Boolean],
      default: false,
    },
    backgroundColor: {
      type: String,
      default: '#fff',
    },
    refresherEnabled: {
      type: Boolean,
      default: false,
    },
    refresherTriggered: {
      type: Boolean,
      default: false,
    },
  })

  // 自定义事件
  defineEmits(['refresherrefresh', 'scrolltolower', 'scroll'])

  const borderBottomStyle = computed(() => {
    if (
      scrollPageProps.borderStyle === '' ||
      scrollPageProps.borderStyle === true
    ) {
      return '1px solid #6abfa5'
    }
    return scrollPageProps.borderStyle
  })
</script>

<template>
  <!-- Tips: scroll-view 不支持 v-bind="obj" 的形式 -->
  <scroll-view
    :style="{
      height: windowHeight + 'px',
      boxSizing: 'border-box',
      borderBottom: borderBottomStyle,
      backgroundColor: backgroundColor,
    }"
    scroll-y
    :scroll-top="scrollPageProps.scrollTop"
    :refresherEnabled="scrollPageProps.refresherEnabled"
    :refresherTriggered="scrollPageProps.refresherTriggered"
    @refresherrefresh="$emit('refresherrefresh', $event)"
    @scrolltolower="$emit('scrolltolower', $event)"
    @scroll="$emit('scroll', $event)"
  >
    <view class="scroll-page-content">
      <slot></slot>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  .scroll-page-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>
